<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="./common/title.html" websiteName="订单付款 - ${website.websiteName}"
              keywords="${website.keywords}"
              description="${website.description}"
              favicon="${website.favicon}"
              shop="${shop}"/>
    <link rel="stylesheet" href="${ctxPath}/default/css/pay.css"/>
    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="page-no-scroll">
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- header -->
<:include file="./common/header.html" websiteName="${website.websiteName}" websiteLogo="${website.websiteLogo}"/>

<div class="layui-container body-card">

    <div class="top-text">
        <div class="top-text-tips">订单提交成功，请尽快完成付款！</div>
        <div class="top-text-main">商品说明：${goodsName!}</div>
        <div class="top-text-price">
            应付金额<span class="goods-money">${price!}</span>元
        </div>
    </div>

    <div class="pay-card">
        <div class="pay-header">
            <div class="ew-container" style="text-align: center; padding: 20px;">
                <:if test="${type==1}">
                    <div class="wxpay-logo"></div>
                </:if>
                <:if test="${type==2}">
                    <div class="alipay-logo"></div>
                </:if>
            </div>
        </div>
        <div class="pay-card-body">
            <div class="qrcode-group">
                <div class="qrcode-body" id="orderbody">
                    <div id="payQrCode" style="width: 260px;height: 260px;"></div>
                    <:if test="${type==2}">
                        <img src="https://t.alipayobjects.com/tfscom/T1Z5XfXdxmXXXXXXXX.png"/>
                    </:if>
                    <:if test="${type==1}">
                        <img src=""/>
                    </:if>
                </div>
                <div class="amount" id="timeOut" style="font-size: 20px;color: red;display: none;"><p>
                    订单已过期，请您返回网站重新发起支付</p><br></div>

                <div class="qrcode-desc">
                    <img src="https://storage.360buyimg.com/payment-assets/pc/icon/icon-red.png"/>
                    <div>请使用
                        <:if test="${type==1}">
                            微信
                        </:if>
                        <:if test="${type==2}">
                            支付宝
                        </:if>
                        扫一扫<br>扫描二维码支付
                    </div>
                </div>
                <strong id="hour_show">0时</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>
            </div>
        </div>

        <div class="pay-card-footer">
            <a href="/search/order/${ordersMember!}" class="pay-card-right-btn ew-disable">等待支付（60s）</a>
        </div>
    </div>

</div>
<!-- footer -->
<:include file="./common/footer.html" websiteName="${website.websiteName}" beianIcp="${website.beianIcp}" shop="${shop}"/>
<!-- js部分 -->
<:include file="./common/js.html"/>
<script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
<script>
    layui.config({
        base: '${ctxPath}/default/module/'
    }).use(['layer', 'QRCode', 'notice'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var QRCode = layui.QRCode;
        var notice = layui.notice;

        // 生成二维码
        new QRCode(document.getElementById('payQrCode'), {
            text: '${result}',
            width: 260,
            height: 260,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });

        // 支付倒计时
        var syTime = 60;
        var timer = setInterval(function () {
            syTime--;
            if (syTime <= 45) {
                $('.pay-card-right-btn').text('已完成支付 >');
                $('.pay-card-right-btn').removeClass('ew-disable');
                clearInterval(timer);
            } else {
                $('.pay-card-right-btn').text('等待支付（' + syTime + 's）');
            }
        }, 1000);

        // 获取订单状态
        setInterval(function () {
            $.get('/order/state/${getOdId!}', function (res) {
                if (res.code == 200 && res.data == 1) {
                    notice.msg("支付成功", {icon: 1});
                    setInterval(function () {
                        location.href = '/search/order/${ordersMember!}';
                    }, 1000);
                }
            }, 'json');
        }, 1500);


        var myTimer;

        function timers(intDiff) {
            var i = 0;
            i++;
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0;//时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#hour_show').html('<s id="h"></s>' + hour + '时');
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
            if (hour <= 0 && minute <= 0 && second <= 0) {
                qrcode_timeout()
                clearInterval(myTimer);

            }
            intDiff--;

            myTimer = window.setInterval(function () {
                i++;
                var day = 0,
                    hour = 0,
                    minute = 0,
                    second = 0;//时间默认值
                if (intDiff > 0) {
                    day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                $('#hour_show').html('<s id="h"></s>' + hour + '时');
                $('#minute_show').html('<s></s>' + minute + '分');
                $('#second_show').html('<s></s>' + second + '秒');
                if (hour <= 0 && minute <= 0 && second <= 0) {
                    qrcode_timeout()
                    clearInterval(myTimer);

                }
                intDiff--;
            }, 1000);
        }

        function qrcode_timeout() {
            document.getElementById("orderbody").style.display = "none";
            document.getElementById("timeOut").style.display = "";
        }

        var time = new Date().getTime() - ${date} * 1000;
        time = time / 1000;
        time = ${timeOut} * 60 - time;
        if (${state} == -1)
        {
            time = 0;
        }
        timers(time);

        /**
         * 判断是否是支付宝，如果是则使用
         */
        <:if test="${type==2}">
            // 判断是否是移动设备
            var device = layui.device();
            if (device.android || device.ios)
            {
                layer.confirm('是否打开支付宝APP支付？', {
                    title: '温馨提示',
                    shade: .1
                }, function () {
                    window.open(${result!});
                });
            }
        </:if>
    });
</script>
</body>
</html>